/* 这是一个公共的样式 */
/* 1.首先去掉浏览器的公共样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置高度 */
html, body {
    /* hrml 是页面的最顶层元素，高度 100% 是相对于父元素来说高度是 100%（和父元素一样高）
       对于 html 标签来说，父元素就是浏览器窗口，浏览器窗口多高，html 就多高。
       body 的父亲是 html，设为 100% 意思就是 body 和 html 一样高。
       此时，body 和 html 的高度都是和浏览器窗口的高度一样高

       如果不设置高度，此时元素的默认高度取决于内部的内容
    */

    width: 100%;
}

/* 设置背景图片 */
body {
    /* 相对路径的基准路径就是当前文件所在的路径 */
    background-image: url(../image/blogimage2.jpg);
    /* 拒绝平铺效果 */
    background-repeat: no-repeat;
    /* 让图片尽可能的把页面填满 */
    background-size: cover;
}

/* 实现导航栏的样式 */
.nav {
    /* 设置宽度和父元素一样宽 */
    width: 100%;
    /* 设置高度 */
    height: 50px;
    /* 为了使导航栏更加的明显，设置一个背景色， a 表示设置透明度*/
    background-color: rgba(50, 50, 50, 0.4);
    /* 文字改为白色 */
    color: white;

    /* 导航栏里的元素都是水平排列的，开启弹性布局来设置 */
    display: flex;
    /* 垂直方向子元素居中 */
    align-items: center;
}

/* 设置导航栏里的图片尺寸 */
.nav img {
    /* 设置宽度和高度 */
    width: 50px;
    height: 50px;
    /* 设置外边距 */
    margin-left: 30px;
    margin-right: 10px;
    /* 设置图片为圆形，设置为宽度的一半，就正好是一个圆形*/
    border-radius: 50%;
}

.nav .spacer {
    /* 设置宽度 */
    width: 70%;
}

/* 设置超链接 */
.nav a {
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    /* 为了扩大超链接之间的间距，这里可以加个内边距 */
    padding: 0 10px;
}

/* 编写页面主体样式 */
.container {
    /* 设置主体部分的宽度 */
    width: 1000px;
    /* 使高度填充整个页面 */
    height: 710px;
    /* 设置水平居中 */
    margin: 0 auto;
     /* 为了方便查看效果，设置一下背景色 */
     /* background-color: blue; */

    /* 设置弹性布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平排列 */
    justify-content: space-between;
}

/* 编写左侧的信息 */
.container-left {
    height: 710px;
    width: 200px;
    /* background-color: red; */
}

/* 编写右侧的信息 */
.container-right {
    height: 710px;
    width: 795px;
    background-color: rgba(255, 255, 255, 0.6);
    /* 设置圆角矩形 */
    border-radius: 10px;
    /* 加上滚动条 */
    overflow: auto;
}

/* 实现左侧用户样式 */
.card {
    /* 背景色加透明度 */
    background-color: rgba(255, 255, 255, 0.6);
    /* 设置圆角矩形 */
    border-radius: 10px;
    /* 设置内边距，让内容和边框之间有点距离 */
    padding: 30px;
}

/* 实现头像设置样式 */
.card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

/* 用户名字设置 */
.card h3 {
    /* 水平居中 */
    text-align: center;
    /* 设置内边距 */
    padding: 10px;
}

/* 设置超链接样式 */
.card a {
    /* 水平居中 */
    text-align: center;
    /* a 标签是行内元素上述的水平居中无法生效，此时要将它改为块级元素 */
    display: block;
    color: #777;
    /* 去下划线 */
    text-decoration: none;
    /* 设置内边距 */
    padding: 10px;
}

/* 设置文章与分类的样式 */
.card .counter {
    /* 为了使元素水平排列，使用弹性布局 */
    display: flex;
    /* 水平方向排列 */
    justify-content: space-around;
    /* 设置内边距让元素有点距离感 */
    padding: 5px;
}